<template>
  <div
      ref="editor"
      style="height: 400px; width: 500px"
  ></div>
</template>
<script>
import ace from 'ace-builds';
import 'ace-builds/webpack-resolver';
import 'ace-builds/src-noconflict/mode-sql';
import 'ace-builds/src-noconflict/theme-sqlserver';
import 'ace-builds/src-noconflict/theme-monokai';

export default {
  data: () => ({
    editor: null,
  }),
  mounted() {
    this.initializeEditor();
  },
  beforeDestroy() {
    if(this.editor){
      this.editor.destroy();
      this.editor.container.remove();
    }
  },
  methods: {
    initializeEditor() {
      this.editor = ace.edit(this.$refs['editor'], {
        theme: 'ace/theme/monokai',
      });

      const session = this.editor.session;
      session.setMode('ace/mode/sql', function (session) {
        console.log(222222222222)
        const rules = session.$mode.$highlightRules.getRules();
        for (const stateName in rules) {
          rules[stateName].unshift({
            token: 'keyword',
            regex: 'SHOW|DDONE|REDSHIFT',
            caseInsensitive: true,
          });
        }
        // force recreation of tokenizer
        session.$mode.$tokenizer = null;
        session.bgTokenizer.setTokenizer(session.$mode.getTokenizer());
        // force re-highlight whole document
        session.bgTokenizer.start(0);
        console.log(rules)
      });
    },
  },
};
</script>

